<!--  -->
<template>
  <div class="edit-info-wrap">
      <van-nav-bar class="edit-info-bar" title="个人信息" left-arrow @click-left='$router.back()'/>
      <input type="file" hidden ref="file" @change="onFileChange">
      <van-cell class="edit-info-photo" title="头像" @click="$refs.file.click()">
          <template #value>
              <!-- <img :src="img" alt=""> -->
              <van-image :src='userProfile.photo' fit='cover'/>
          </template>
      </van-cell>
      <van-cell class="edit-info-cell" title="昵称" @click="nameShow=true">
          <template #value>
              <span>{{userProfile.name}}</span>
              <van-icon name="arrow" />
          </template>
      </van-cell>
      <van-cell class="edit-info-cell" title="性别" @click="genderShow=true">
          <template #value>
              <span>{{gender}}</span>
              <van-icon name="arrow" />
          </template>
      </van-cell>
      <van-cell class="edit-info-cell" title="生日" @click="birthdayShow=true" >
          <template #value>
              <span>{{userProfile.birthday}}</span>
              <van-icon name="arrow" />
          </template>
      </van-cell>
      <van-popup v-model:show="show"
                 v-if="show"
                 position="bottom"
                 :style="{ height: '100%' }"
      >
       <edit-img :img='img' @update-show='show=false' @update-img='onUpdateImg'></edit-img>
      </van-popup>
      <!-- 编辑名字弹出框 -->
      <van-dialog v-model:show="nameShow" title="编辑昵称"
       show-cancel-button @confirm='onNameConfirm'>
        <van-cell-group inset>
        <van-field
            v-model.trim="message"
            rows="2"
            autosize
            type="textarea"
            maxlength="10"
            placeholder="请输入昵称"
            show-word-limit
        />
        </van-cell-group>
      </van-dialog>
      <!-- 编辑名字弹出框 -->
      <!-- 编辑性别弹出层-->
      <van-popup v-model:show="genderShow" position="bottom" :style="{ height: '50%' }" >
          <gender-popup @update-genderShow='genderShow=false' default-index='userProfile.gender'
                        @update-gender='onUpfateGender'
          ></gender-popup>
      </van-popup>
      <!-- 编辑性别弹出层 -->
      <!-- 编辑性别弹出层-->
      <van-popup v-model:show="birthdayShow" v-if="birthdayShow"
       position="bottom" :style="{ height: '50%' }" >
          <edit-birthday v-model="userProfile.birthday"
                         @close='birthdayShow=false'
          ></edit-birthday>
      </van-popup>
      <!-- 编辑性别弹出层 -->
  </div>
</template>

<script>
import EditImg from './editImg.vue'
import { getUserProfile, updateUserProfile } from '@/api/user'
import GenderPopup from './genderPopup.vue'
import EditBirthday from './editBirthday.vue'
export default {
  name: 'EndiInformation',
  components: {
    EditImg,
    GenderPopup,
    EditBirthday
  },
  data () {
    return {
      show: false, // 控制遮罩层是否出现
      img: null,
      nameShow: false, // 控制名字编辑弹出框
      genderShow: false, // 控制性别编辑弹出框
      birthdayShow: false, // 控制生日编辑弹出框
      message: '',
      userProfile: {} // 储存用户个人资料
    }
  },
  computed: {
    gender () {
      if (this.userProfile.gender === 0) {
        return '男'
      } else {
        return '女'
      }
    }
  },
  created () {
    this.localUserProfile()
  },
  methods: {
    onFileChange () {
      // 获取文件对象
      const file = this.$refs.file.files[0]
      // 基于文章对象获取blob数据
      this.img = window.URL.createObjectURL(file)
      // 弹出层显示
      this.show = true
      // 如果选了同一个文件，change事件不会触发
      // 解决办法，将value清空
      this.$refs.file.value = ''
    },
    // 请求个人资料
    async localUserProfile () {
      try {
        const res = await getUserProfile()
        this.userProfile = res.data.data
      } catch (error) {
        console.log(error)
      }
    },
    onUpdateImg (val) {
      // 更新视图
      this.userProfile.photo = val
    },
    // 更新性别
    onUpfateGender (val) {
      this.userProfile.gender = val
    },
    // 编辑名字完成触发事件
    onNameConfirm () {
      if (!this.message.length) {
        this.$toast('昵称不能为空')
      } else {
        this.userProfile.name = this.message
        updateUserProfile({ name: this.message }).then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style  scoped lang='less'>
 .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }

.edit-info-wrap {
  /deep/.edit-info-bar {
    background-color: rgb(42, 185, 161);
    .van-ellipsis {
      color: white;
    }
    i {
      color: rgb(55, 223, 69);
      font-size: 50px;
    }
  }
  /deep/.edit-info-photo {
     height: 88px;
     padding-top: 0;
     padding-bottom:0;
     .van-cell__title {
         display: flex;
         align-items: center;
         justify-content: flex-start;
     }
     .van-cell__value {
         display: flex;
         align-items: center;
         justify-content: flex-end;
     }
     img {
         border-radius: 40px;
         width: 80px;
         height: 80px;
     }
  }
}
</style>
